<template>
  <div :style="{ backgroundColor: bg_color }" class="music_play">
    <div class="offPlay">
      <i @click="offPlay" class="iconfont icon-arrow-down"></i>
    </div>
    <div class="music_info">
      <div class="music_wrap">
        <MusicInfo @musicChange="musicChange"></MusicInfo>
      </div>
      <div class="lyrics_wrap">
        <LyricsScroll></LyricsScroll>
      </div>
    </div>
  </div>
</template>

<script>
import MusicInfo from "@/components/musicPlay/MusicInfo";
import LyricsScroll from "@/components/musicPlay/LyricsScroll";
export default {
  name: "Musicplay",
  components: {
    MusicInfo,
    LyricsScroll,
  },

  data() {
    return {
      colorList: [
        "#574266",
        "#888084",
        "#2F2524",
        "#424c50",
        "#3A424B",
        "#3E4F34",
      ],
      bg_color: "#3A424B",
    };
  },

  mounted() {},

  methods: {
    //关闭歌词界面
    offPlay() {
      this.$store.dispatch("musicPlay/saveIsOnPlay", "false");
      sessionStorage.setItem("isOnPlay", false);

      var thisIndex = Math.floor(Math.random() * this.colorList.length);
      //根据索引号获取数组值
      this.bg_color = this.colorList[thisIndex];
    },
    //换肤
    colorChange(color) {
      this.bg_color = color;
    },
    musicChange(e){
      this.$emit('musicChange',e)
    }
  },
};
</script>

<style lang="less" scoped>
.music_play {
  background-color: pink;
  position: relative;
  .offPlay {
    height: 70px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    i {
      margin-right: 3rem;
      float: right;
      padding: 13px 13px;
      &:hover {
      }
    }
  }
  .music_info {
    padding: 0 2rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .music_wrap {
      width: 52%;
    }
    .color_change {
      position: absolute;
      bottom: 0;
      left: 17rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .color_item {
        z-index: 66;
        width: 50px;
        height: 30px;
        // border-radius: 13px;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        transition: 1s;
        &:hover {
          transform: translateY(-20px);
          height: 50px;
        }
      }
    }
    .lyrics_wrap {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>